<template>
<div>

<div class="a" :style="{'width':offsetwidth+'px', 'height':offsetheight+'px'}">
	<img src="https://img.hidlq.com/image/cuanyue/kongjianzhanshi-bg.png" 
	:style="{'height':offsetheight+'px', 'transform': 'translate3d(-' + offsetX + 'px, 0px, 0px)'}"  >


	<div class="a2"
	:style="{'top': offsetheight * 0.5 - 270 +'px', 'left' :  offsetwidth * 0.5 - 600 + 'px'}"
	>
		<img src="https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k1.png" class="mr20 pointer" width="370" height="150" 
		@click="clickimg('https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k1.png')">
		<img src="https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k2.png" class="mr20 	pointer" width="370" height="150"
		@click="clickimg('https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k2.png')"
		>
		<img src="https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k3.png" width="370" height="150" class="pointer"
		@click="clickimg('https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k3.png')"
		>

		<img src="https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k4.png" class="mt20 mr20 pointer" width="370" height="150"
		@click="clickimg('https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k4.png')"
		>
		<img src="https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k5.png" class="mt20 mr20 pointer" width="370" height="150"
		@click="clickimg('https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k5.png')"
		>
		<img src="https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k6.png" class="mt20 pointer" width="370" height="150"
		@click="clickimg('https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k6.png')"
		>

		<img src="https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k7.png" class="mt20 mr20 pointer" width="370" height="150"
		@click="clickimg('https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k7.png')"
		>
		<img src="https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k8.png" class="mt20 mr20 pointer" width="370" height="150"
		@click="clickimg('https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k8.png')"
		>
		<img src="https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k9.png" class="mt20 pointer" width="370" height="150"
		@click="clickimg('https://img.hidlq.com/image/cuanyue/kongjianzhanshi/k9.png')"
		>

	</div>
		
</div>


<el-dialog
	fullscreen
  :visible.sync="dialogVisible"
  width="70%" class="text-center">
  <img width="90%" :src="dialogImageUrl" alt="">
  <!-- <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">关闭</el-button>
  </span> -->
</el-dialog>

</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'cuanyuekongjianzhanshi',
	
	data () {
		return {
		  	offsetheight : document.documentElement.clientHeight - 60,    //获取当前页面的高度
			offsetwidth : document.documentElement.clientWidth,    //获取当前页面的高度

			imgWidth : 1400,
			imgHeight : 500,

			dialogVisible : false,
			dialogImageUrl : '',
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),

		bili () {
			return this.offsetheight / this.imgHeight;
		},

		offsetX () {
			return (this.imgWidth * this.bili - this.offsetwidth) * 0.5;
		},
	},

	methods : {
		clickimg (img) {
			console.log(img);
			this.dialogVisible = true;
			this.dialogImageUrl = img;
		},
	},

	watch : {
	    
	},

	mounted () {
		
	},

}
</script>

<style scoped>
.section{
	overflow: hidden;
}
.a {
	position: relative;
}
.a1 {
	position: absolute;
	/*animation-delay: 1s;
	animation-duration: 1s;*/
}

.a2 {
	position: absolute;
	width: 1175px;
	height: 440px;
	/*background: red;*/
	padding : 25px;
}
</style>
